<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 375
    418 */

    body {
      font-size: 16px;
    }

    #box {
      width: 3.79rem;
      height: .99rem;
      background: #22a2f3;
    }

    #wrap {
      width: 100%;
    }

    #btn_wrap {
      height: .9rem;
      display: flex;
      justify-content: space-around;
    }

    #btn_wrap button {
      border: 1px solid red;
    }

    .prolist {}

    .list_one {
      display: flex;
      height: 2.4rem;
      border-bottom: 1px solid #e5e5e5;
      margin-top: 10px;
    }

    .list_left {
      margin-right: .15rem;
    }

    .list_right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .list_one img {
      width: 2.2rem;
      height: 2.2rem;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <div id="btn_wrap">
      <button id="toDown">价格由高到低</button>
      <button id="toUp">价格由低到高</button>
    </div>
  </div>
  <div class="prolist">
    <!-- <div class="list_one">
      <div class="list_left">
        <img
          src="//img10.360buyimg.com/n2/s240x240_jfs/t1/149640/38/9778/136203/5f74907eE71bd6fc3/cec1fd5489529aab.jpg!q70.jpg"
          alt="">
      </div>
      <div class="list_right">
        <p class="pname">电脑</p>
        <div style="color:red;">888</div>
        <div>8</div>
        <div>小计</div>
      </div>
    </div> -->
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script>
    // 移动端布局 主流   flex+rem布局
    // pc端设计图  1200 1300 1400 1900
    // rem适配原理 根据用户的屏幕尺寸动态的改变html根元素的font-size
    // 移动端 设计图  640  iphone5s --->设备的真实宽度 320
    // 主流设计图   750  iphone6 ---->设置真实宽度  375
    // 1rem---100px  设计图方案
    // 1rem---50px    真实设备                     375
    function rems() {
      console.log(window.innerWidth)
      var innerWidth = window.innerWidth;
      if (innerWidth > 750) {
        innerWidth = 750;
      }
      document.documentElement.style.fontSize = innerWidth / 7.5 + "px"
    }
    rems()
    window.onresize = function () {
      rems()
    }
    // 原生js加载商品列表
    var xhr = new XMLHttpRequest();
    xhr.open("get", "http://127.0.0.1:3000/all", true);
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        var arr = JSON.parse(xhr.responseText)
        loadList(arr)
      }
    }
    // 排序
    var toDown = document.getElementById("toDown");
    var toUp = document.getElementById("toUp");
    toDown.onclick = function () {
      sort(-1)
    }
    toUp.onclick = function () {
      sort(1)
    }
    // 获取排序后的数据
    function sort(order) {
      var xhr = new XMLHttpRequest();
      xhr.open("post", "http://127.0.0.1:3000/sortPrice", true)
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      xhr.send("order=" + order)
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var arr = JSON.parse(xhr.responseText)
          loadList(arr)
        }
      }
    }




    // 页面渲染方法
    function loadList(arr) {
      // 数据处理
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `   <div class="list_one">
            <div class="list_left">
              <img
                src="//img10.360buyimg.com/n2/s240x240_jfs/t1/149640/38/9778/136203/5f74907eE71bd6fc3/cec1fd5489529aab.jpg!q70.jpg"
                alt="">
            </div>
            <div class="list_right">
              <p class="pname">${arr[i].goodsname}</p>
              <div style="color:red;">￥${arr[i].price}</div>
              <div>${arr[i].num}</div>
              <div>${arr[i].price * arr[i].num}</div>
            </div>
          </div>`
      }
      var prolist = document.querySelector(".prolist");
      prolist.innerHTML = str;
    }

  </script>
</body>

</html>